@use "common/_vars" as *;
@use "./partials/reboot";
@use "./mixins/utils.scss" as utils;
@use "sass:map" as map;

a[name=top],
#topnav,
#page_begin_html,
#page_end_html,
#home > .clear,
#main > .clear,
#navigator > .blogStats {
  @extend [hidden];
}

.tippy-box[data-theme~="tooltip"] {
  --shadow-rgb: 0, 0, 0;

  padding: 2px 5px;
  border-radius: 0;
  border: 1px solid var(--divider-dark);
  background-color: var(--prism-background);
  font-size: 75%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: none;
  @include utils.truncate;
}

pre[class*="language-"] {
  border-width: 0;
}

.loading {
  --icon: #{ map.get($icons, 'loading') };
  position: relative;
  overflow: hidden;

  &::before,
  &::after {
    content: "";
    position: fixed;
  }

  &::before {
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    background-color: hsla(0, 0%, 100%, .5);
    backdrop-filter: saturate(180%) blur(15px);
  }

  &::after {
    top: calc(50% - 0.6rem);
    left: calc(50% - 0.6rem);
    z-index: 11;
    width: 1.2rem;
    height: 1.2rem;
    mask: var(--icon) no-repeat;
    mask-size: 100%;
    background-color: currentColor;
    animation: rotating 2s infinite linear;
  }

  .dark &::before {
    background-color: hsla(0, 0%, 0%, .8);
  }
}

@keyframes rotating {
  100% {
    transform: rotate(1turn);
  }
}


@media (max-width: 767px) {
  main {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

@import "macro-layout";
